<template>
	<view class="page">

		<view class="banner">
			<swiper class="swiper-box" @change="change" :current="current">
				<swiper-item v-for="(item, index) in images" :key="index">
					<image @click="$util.previewImage(images, index)" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<view class="banner_preview">
				<scroll-view scroll-x="true">
					<view class="banner_list flex_center">
						<image :src="item" mode="aspectFill" v-for="(item,index) in images" :key="index"
							:id="index == current ? 'select' : ''" @click="current = index"></image>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="body">

			<view class="title">{{ data.title || '' }}</view>

			<view class="price flex_center">
				<view>{{ Number(data.active_price) == 0 ? '免费' : data.active_price }}</view>
				<text v-if="Number(data.active_price) != 0">元/人</text>
			</view>

			<view class="list flex_center">
				<image :src="$util.prefix('active/active_list_icon_adate.png')"></image>
				<text>截止 {{ data.end_time_text || '无限期' }}</text>
			</view>

			<view class="list flex_center" v-if="data.active_address">
				<image :src="$util.prefix('active/active_list_icon_address.png')"></image>
				<text>{{ data.active_city }}{{ data.active_district }}{{ data.active_address }}</text>
			</view>
			
			<view class="user flex_center">
				<view class="info flex_center">
					<view class="avatar">
						<image :src="data.avatar" mode="aspectFill" class="image"></image>
						<image :src="$util.prefix('circle/v_icon.png')" mode="aspectFill" class="icon"
							v-if="data.is_vip"></image>
					</view>
			
					<view class="text">
						<view class="top flex_center">
							<view class="hidden">{{ data.nickname || '' }}</view>
							<text>ID {{ data.user_id }}</text>
							<image @click="onCopy(111)" :src="$util.prefix('public/copy.png')" mode="aspectFill">
							</image>
						</view>
						<view class="bottom flex_center">
							<image :src="$util.prefix(`public/sex_${data.gender}_no_bg.png`)" mode=""></image>
							<text>{{ data.age }}岁</text>
							<text>IP属地：{{ data.city || '未知' }}</text>
						</view>
					</view>
				</view>
			
				<view class="button">
					<view class="item flex_r_around" @click="showLogin">
						<view class="flex_center">
							<u-icon name="plus" color="#FD2A53" size="24rpx" bold></u-icon>
							<text>关注</text>
						</view>
					</view>
				</view>
			
			</view>

			<view class="line"></view>

			<view class="people" v-if="data.apply_list && data.apply_list.length">
				<view class="people_title">已参与成员({{ data.apply_list.length }}人)</view>
				<view class="people_list">
					<scroll-view scroll-x="true">
						<view class="flex_center">
							<view class="people_item flex_c" v-for="(item,index) in data.apply_list" :key="index">
								<view class="people_avatar">
									<image :src="item.avatar" mode="aspectFill"></image>
								</view>
								<text class="hidden">{{ item.nickname || '' }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="rich">
				<view class="rich_title">活动介绍</view>
				<view class="rich_content">
					<textarea v-model="data.intro" disabled :auto-height="true"></textarea>
				</view>
			</view>

		</view>

		<view class="btn_page flex_r_between">
			<view class="left flex_center">
				<view class="item flex_c" @click="showLogin">
					<u-icon name="star-fill" size="40rpx" color="#FD2A53" v-if="data.is_collect > 0"></u-icon>
					<u-icon name="star" size="40rpx" color="#333333" v-else></u-icon>
					<text>{{ data.collect_num || 0 }}</text>
				</view>
			</view>

			<view class="flex_center">
				<view class="right flex_r_around" @click="showLogin">
					<view class="flex_center">
						<image :src="$util.prefix('active/active_message_icon.png')"></image>
						<text>私信</text>
					</view>
				</view>
				<view class="right flex_r_around" @click="showLogin">
					<view class="flex_center">
						<image :src="$util.prefix('active/active_btn_icon.png')"></image>
						<text>去报名</text>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="modal">
				<view class="text">需注册并下载APP体验完整功能</view>
				<view class="btn flex_r_between">
					<view class="item cancel flex_r_around" @click="show = false">
						<text>取消</text>
					</view>
					<view class="item submit flex_r_around" @click="toDownLoad">
						<text>去注册</text>
					</view>
				</view>
		
				<view class="icon">
					<u-icon name="error-circle-fill" color="#FD2A53" size="112rpx"></u-icon>
				</view>
			</view>
		</u-popup>
		
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="show_register" mode="center" @close="show_register = false" bgColor="transparent">
				<view class="register flex_c">
					<view class="logo">
						<image :src="$util.prefix('logo.png')" mode="aspectFill"></image>
					</view>
		
					<view class="input flex_center">
						<input type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="input-placeholder"
							v-model="mobile" />
					</view>
		
					<view class="input flex_center">
						<input type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="input-placeholder"
							v-model="code" />
						<view class="code_btn" @click="getCode">
							{{sending ? `已发送${num}` : '获取验证码'}}
						</view>
					</view>
		
					<view class="text flex_center">
						<i>*</i>
						<text>手机号用于验证并绑定账号</text>
					</view>
		
					<view class="register_btn flex_r_around" @click="onSubmit">
						<text>确定</text>
					</view>
		
				</view>
			</u-popup>
		</view>
		
		<u-popup :show="show_two" mode="center" @close="show_two = false" bgColor="transparent">
			<view class="modal2 flex_c">
				<view class="icon flex_center">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_two = false"></u-icon>
				</view>
				<view class="title">注册成功</view>
				<view class="text">请到应用市场搜索《超圈》体验完整版</view>
				<view class="btn flex_r_between">
					<view class="item submit flex_r_around" @click="onDownLoad">
						<text>去下载</text>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="show_outside" @close="show_outside = false" mode="top">
			<view class="openout flex_r_between">
				<view class="left">
					<image :src="$util.prefix('index/logo.png')" mode="aspectFill"></image>
					<text>安装超圈</text>
					<view class="flex_center">
						<i>点击右上角</i>
						<u-icon name="more-dot-fill" color="#666666" size="40rpx"></u-icon>
					</view>
					<view>
						<i>选择在浏览器中打开</i>
					</view>
				</view>
		
				<view class="right">
					<image :src="$util.prefix('index/h5_to.png')" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	export default {
		components: {
			wLoading,
		},
		data() {
			return {
				id: 0,

				circle_id: 0,

				images: [

				],

				data: {},

				trans: 0,

				current: 0,
				
				show: false,
				show_register: false,
				show_two: false,
				show_outside: false,
				
				pid: 0,
				mobile: '',
				code: '',
				num: 60,
				sending: false,
				
				is_micromessenger: false,
				
				an_url: '',
				ios_url: '',
			}

		},
		methods: {
			preventHandler(){
				return;
			},

			getDetail() {
				this.$get('/loyou/getLoyouInfo', {
					loyou_id: this.id
				}).then(res => {
					this.data = res.data;
					this.images = res.data.images.split(',');
				})
			},

			change(e) {
				this.current = e.detail.current;
			},

			onCopy(str) {
				uni.setClipboardData({
					data: `${str}`,
					showToast: false,
					success: () => {
						this.$util.msg('已复制到剪贴板');
					}
				});
			},
			
			showLogin(){
				if (this.is_micromessenger) {
					this.show_outside = true;
				} else {
					this.show = true;
				}
			},
			
			toDownLoad() {
				this.show = false;
				// this.$util.toUrl(`/pages/share/invite?pid=${this.pid}&circle_id=${this.circle_id}`);
				this.show_register = true;
			},
			
			onSubmit() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}
				if (!this.code) {
					return uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
				}
			
				this.$post('/login/register', {
					code: this.code,
					mobile: this.mobile,
					pid: this.pid,
					circle_id: this.circle_id
				}, false, (res => {
					if (res.code == 5500) {
						this.show_register = false;
						this.show_two = true;
					} else {
						this.show_download = false;
						this.$util.msg(res.msg);
					}
				})).then(res => {
					this.show_register = false;
					this.show_two = true;
				});
			},
			
			onDownLoad() {
				if (this.is_micromessenger) {
					this.show = false;
					this.show_register = false;
					this.show_outside = true;
				} else {
					var type = uni.getSystemInfoSync().platform;
					if (type == 'ios') {
						window.open(this.ios_url)
					} else {
						window.open(this.an_url)
					}
				}
			},
			
			getDownLoadUrl() {
				this.$post("/index/getApkVersion").then(res => {
					this.an_url = res.data.app_path
					this.ios_url = res.data.ios_path
				})
			},
			
			getDownLoadUrl() {
				this.$post("/index/getApkVersion").then(res => {
					this.an_url = res.data.app_path
					this.ios_url = res.data.ios_path
				})
			},
			
			getCode() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}
			
				this.$post('/index/sendSms', {
					mobile: this.mobile,
					scene: 102
				}).then(res => {
					this.$util.msg('已发送');
					this.afterCode()
				})
			},
			
			afterCode() {
				this.sending = true;
				var timer = setInterval(() => {
					this.num--;
					if (this.num == 1) {
						clearInterval(timer)
						this.num = 60;
						this.sending = false;
					}
				}, 1000)
			},
		

		},

		onLoad(option) {
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.is_micromessenger = true;
			} else {
				this.is_micromessenger = false;
			}
			this.id = option.id || 0;
			this.circle_id = option.circle_id || 0;
			this.getDetail();
			this.pid = option.pid || 0;
			this.getDownLoadUrl();
		},

		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop <= 200) {
				this.trans = e.scrollTop / 200;
			} else {
				this.trans = 1
			}
		},
	}
</script>

<style lang="less" scoped>
	.page {
		background: #FFF;
		min-height: 100vh;
		padding-bottom: 130rpx;
	}

	.banner {
		width: 100vw;
		height: 100vw;
		overflow: hidden;
		position: relative;

		.swiper-box {
			width: 100vw;
			height: 1080rpx;

			swiper-item {
				width: 100vw;
				height: 1080rpx;

				image {
					width: 100vw;
					height: 1080rpx;
					display: block;
				}
			}
		}

		.banner_preview {
			padding: 32rpx;
			position: absolute;
			bottom: 150rpx;
			left: 0;
			overflow: hidden;
			width: 100vw;

			.banner_list {
				image {
					flex-shrink: 0;
					width: 96rpx;
					height: 96rpx;
					border-radius: 16rpx;
					margin-right: 16rpx;
					border: 4rpx solid transparent;
					display: block;
				}
			}

			#select {
				border: 4rpx solid #FD2A53;
			}
		}
	}

	.body {
		position: relative;
		z-index: 2;
		width: 750rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -150rpx;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/partner/card_preview_user_bg.png) 0 0 no-repeat;
		background-color: #FFF;
		background-size: 100%;
		padding: 0 0 0;
		overflow: hidden;

		.user {
			overflow: hidden;
			padding: 0 32rpx;
			width: 100%;
			margin-top: 48rpx;

			.info {
				overflow: hidden;
				flex: 1;

				.avatar {
					position: relative;
					width: 128rpx;
					height: 128rpx;
					margin-right: 16rpx;

					.image {
						width: 128rpx;
						height: 128rpx;
						border-radius: 64rpx;
					}

					.icon {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 0;
						bottom: 0;
					}

				}

				.text {
					flex: 1;
					overflow: hidden;

					.top {
						view {
							font-weight: 500;
							font-size: 40rpx;
							color: #131313;
							max-width: 300rpx;
						}

						text {
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							margin: 0 12rpx 0 24rpx;
						}

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}

					.bottom {
						image {
							width: 20rpx;
							height: 20rpx;
						}

						text {
							font-size: 24rpx;
							color: #131313;
							margin-left: 10rpx;
						}
					}
				}
			}

			.button {
				margin-left: 16rpx;
				.item {
					width: 144rpx;
					height: 56rpx;
					background: #FFF8F9;
					border-radius: 12rpx;
					border: 2rpx solid #FFEAEE;
			
					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 6rpx;
						display: block;
					}
			
					.h30 {
						width: 36rpx;
						height: 30rpx;
					}
			
					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #FD2A53;
					}
				}
			
				.have {
					background: #F1F1F1;
			
					text {
						color: #131313;
					}
				}
			}
		}

		.title {
			padding: 0 32rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
			margin: 40rpx 0 20rpx;
		}

		.price {
			align-items: flex-end;
			padding: 0 32rpx 32rpx;
			border-bottom: 2rpx solid #F1F1F1;

			view {
				font-weight: 600;
				font-size: 48rpx;
				color: #FD2A53;
				line-height: 56rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 24rpx;
				color: #131313;
				line-height: 40rpx;
			}
		}

		.list {
			margin-top: 34rpx;
			padding: 0 32rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}

			text {
				font-size: 26rpx;
				color: #131313;
				line-height: 36rpx;
			}
		}

		.line {
			width: 100%;
			height: 16rpx;
			background: #F1F1F1;
			margin: 30rpx 0;
		}

		.more {
			overflow: hidden;
			margin: 0 32rpx;

			.list {
				overflow: hidden;
				height: 144rpx;
				background: #F1F1F1;
				border-radius: 24rpx;

				.user_info {
					flex: 1;

					.avatar {
						width: 88rpx;
						height: 88rpx;
						background: #D8D8D8;
						border-radius: 44rpx;
						overflow: hidden;
						margin-right: 16rpx;

						image {
							width: 88rpx;
							height: 88rpx;
						}
					}

					.text {
						flex: 1;

						.nickname {
							font-weight: 600;
							font-size: 28rpx;
							color: #131313;
						}

						.icon_text {

							text {
								font-size: 24rpx;
								color: #666666;
								line-height: 34rpx;
								margin: 0 12rpx 0 0;
							}

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}
				}

				.list_btn {
					width: 144rpx;
					height: 56rpx;
					background: #FD2A53;
					border-radius: 12rpx;
					margin-left: 16rpx;

					text {
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}
			}

			.more_block {
				padding: 32rpx 0;
				border-bottom: 2rpx solid #F1F1F1;

				.more_btn {
					text {
						font-size: 26rpx;
						color: #131313;
						line-height: 36rpx;
					}
				}
			}

		}

		.people {
			padding: 0 32rpx;

			.people_title {
				font-weight: 600;
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
				margin-bottom: 40rpx;
			}

			.people_list {
				scroll-view {
					width: 100%;
				}

				.people_item {
					width: 100rpx;
					margin-right: 20rpx;

					.people_avatar {
						width: 96rpx;
						height: 96rpx;

						image {
							width: 96rpx;
							height: 96rpx;
							border-radius: 48rpx;
						}
					}

					text {
						width: 100rpx;
						text-align: center;
						font-size: 26rpx;
						color: #131313;
					}
				}
			}
		}

		.rich {
			margin-top: 40rpx;
			padding: 0 32rpx;

			.rich_title {
				font-weight: 600;
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
				margin-bottom: 32rpx;
			}

			.rich_content {
				textarea {
					width: 100%;
					font-size: 26rpx;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}
	}

	.btn_page {
		padding: 0 48rpx;
		height: 112rpx;
		width: 100vw;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		.left {
			.item {
				margin-right: 60rpx;

				text {
					font-size: 24rpx;
					color: #131313;
					line-height: 34rpx;
				}
			}
		}

		.right {
			width: 280rpx;
			height: 88rpx;
			background: linear-gradient(142deg, #FF79A4 0%, #FD2A53 100%);
			border-radius: 44rpx;
			margin-left: 16rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
			}
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 104rpx 44rpx 44rpx;
	
		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}
	
		.btn {
			margin-top: 42rpx;
	
			.item {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;
	
				text {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
	
			.cancel {
				background: #F1F1F1;
	
				text {
					color: #333333;
				}
			}
	
			.submit {
				background: #FD2A53;
	
				text {
					color: #FFF;
				}
			}
		}
	
		.icon {
			position: absolute;
			top: -50rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #FFF;
			border-radius: 50%;
		}
	
	}
	
	.register {
		width: 600rpx;
		height: 632rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding-top: 30rpx;
	
		.logo {
			width: 128rpx;
			height: 128rpx;
			background: #FD4545;
			border-radius: 16rpx;
			overflow: hidden;
	
			image {
				width: 128rpx;
				height: 128rpx;
			}
		}
	
		.input {
			width: 480rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #F1F1F1;
			padding: 0 24rpx;
			margin: 32rpx 0 0;
	
			input {
				flex: 1;
			}
	
			.code_btn {
				font-weight: 500;
				font-size: 26rpx;
				color: #FD2A53;
				margin-left: 20rpx;
			}
		}
	
		.text {
			margin: 32rpx 0;
	
			text {
				font-size: 22rpx;
				color: #999999;
			}
	
			i {
				color: #FD2A53;
				font-style: normal;
			}
		}
	
		.register_btn {
			width: 480rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 48rpx;
	
			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	
	}

	.modal2 {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 16rpx 44rpx 62rpx;
		
		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}
		
		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}
		
		.btn {
			margin-top: 42rpx;
		
			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;
		
				text {
					font-size: 28rpx;
				}
			}
		
			.submit {
				background: #FD2A53;
		
				text {
					color: #FFF;
				}
			}
		}
		
		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}

	.openout {
		background: rgba(255, 255, 255, .8);
		width: 100vw;
		padding: 32rpx 64rpx 32rpx 72rpx;
	
		.left {
			image {
				width: 174rpx;
				height: 66rpx;
				display: block;
				margin-bottom: 20rpx;
			}
	
			view {
				i {
					font-size: 28rpx;
					color: #666666;
					font-style: normal;
				}
			}
	
			text {
				font-size: 28rpx;
				color: #666666;
				display: block;
			}
		}
	
		.right {
			width: 90rpx;
			height: 188rpx;
	
			image {
				width: 90rpx;
				height: 188rpx;
				display: block;
			}
		}
	
	}

</style>